jQuery(document).ready(function($) {
	//stellar.js
	$(window).stellar();

	//cache variables
	var links = $('.navigation').find('li');
	slide = $('.slide');
	button = $('.button');
	mywindow = $(window);
	htmlbody = $('html,body');

	//setup waypoint plugins
	slide.waypoint(function(direction) {
		//cache variable of data-slide attr of slide
		dataslide = $(this).attr('data-slide');
		
		console.log(direction);
		//user scroll up 
		// => change navigation link active + 
		// => remove active class from previousr navigation link
		if (direction === 'down') {
			console.log('down is ' + dataslide);
			$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
		} else {
			console.log('up is ' + dataslide);
			$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
		}
	});

	//remove class of nav link slide 2 + add it to link slide 1 if usr scroll back up top 
	mywindow.scroll(function() {
		if (mywindow.scrollTop() == 0) {
			$('.navigation li[data-slide="1"]').addClass('active');
			$('.navigation li[data-slide="2"]').removeClass('active');
		}
	});

	//Scroll to slide using jQuery animate
    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 1000, 'easeInOutQuint');
    }

	links.click(function(e) {
		e.preventDefault();
		dataslide = $(this).attr('data-slide');
		goToByScroll(dataslide);
	});

	button.click(function(e) {
		e.preventDefault();
		dataslide = $(this).attr('data-slide');
		goToByScroll(dataslide);
	});
});